<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>研学旅行</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" th:href="@{/css/font.css}">
	<link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>

</head>
<body>
    <!-- 顶部开始 -->
    <div class="container" th:include="head :: header">
    	
    </div>
    <!-- 顶部结束 -->
    <!-- 中部开始 -->
    <div class="wrapper">
        <!-- 左侧菜单开始 -->
        <div class="left-nav">
        	<div id="side-nav"  th:include="left :: left_nav">
        	
        	</div>
        </div>
        <!-- 左侧菜单结束 -->
        <!-- 右侧主体开始 -->
        <div class="page-content">
          <div class="content">
            <!-- 右侧内容框架，更改从这里开始 -->
            <blockquote class="layui-elem-quote">
               	
            </blockquote>
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main" style="width: 100%;height:400px;"></div>
            <blockquote class="layui-elem-quote" style="text-align: center;">
            	<p style="font-size:20px;font-weight:600;">项目差评数表格数据图</p>
            	<a id="daoru" class="layui-btn" style="position:absolute;right: 50px;top:465px;" onclick="daoru()" >生成Excel文件</a>
               <table class="layui-table" >
  					<thead>
  						<tr>
  							<th>项目</th>
  							<th>差评数</th>
  						</tr>
  					</thead>
  					<tbody>
  						<tr th:each="mydAndNamess : ${mydAndNames}">
  							<td th:text="${mydAndNamess.name}"></td>
  							<td th:text="${mydAndNamess.value}"></td>
  						</tr>
  					</tbody>
				</table>
            </blockquote>
            <!-- 右侧内容框架，更改从这里结束 -->
          </div>
        </div>
        <!-- 右侧主体结束 -->
    </div>
    <!-- 中部结束 -->
    <!-- 底部开始 -->
    <div class="footer">
        <div class="copyright">Copyright ©2019 研学旅行管理系统</div>  
    </div>
    <!-- 底部结束 -->
    <!-- 背景切换开始 -->
    <div class="bg-changer">
        <div class="swiper-container changer-list">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img class="item" src="./images/a.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/b.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/c.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/d.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/e.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/f.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/g.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/h.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/i.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/j.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/k.jpg" alt=""></div>
                <div class="swiper-slide"><span class="reset">初始化</span></div>
            </div>
        </div>
        <div class="bg-out"></div>
        <div id="changer-set"><i class="iconfont">&#xe696;</i></div>   
    </div>
    <!-- 背景切换结束 -->
        
        <script src="http://cdn.bootcss.com/echarts/3.3.2/echarts.min.js" charset="utf-8"></script>
        <script type="text/javascript" th:src="@{/js/echarts-for-x-admin.js}"></script>
		<script type="text/javascript" th:src="@{/js/vue.js}" ></script>
        <script type="text/javascript">
        
        function daoru(){
        	CpDBExcel = "http://localhost:8080/CpDBExcel";
     		window.location.href=CpDBExcel; 
     	}
        
        $(function(){
        	var vue = new Vue({
       		 
       		 el:".bg-out",
       		 data : {
       			 data : [],
       	        data2:[]
       		 }
       		 
       	 });
       	 
       	 $.ajax({
    			url:"http://localhost:8080/toYgKqAjax",
    			data:{},
    			type:"post",
    			dataType:"json",
    			success:function(data){
    				for(var i=0;i<data.length;i++){
    					vue.data[i]=data[i];
    				}
    			}
    			
    		});
       	 
       	 $.ajax({
     			url:"http://localhost:8080/toYgKqAjax2",
     			data:{},
     			type:"post",
     			dataType:"json",
     			success:function(data){
     				vue.data2=data;
     			}
     			
     		});
       
        
        setTimeout(function(){
        	 // 基于准备好的dom，初始化echarts实例
            var dom = document.getElementById("main");
        
var myChart = echarts.init(dom);
var app = {};
option = null;
var weatherIcons = {
    
};

option = {
    title: {
        text: '项目差评数对比',
        subtext: '虚构数据',
        left: 'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        // orient: 'vertical',
        // top: 'middle',
        bottom: 10,
        left: 'center',
        data: vue.data2
    },
    series : [
        {
            type: 'pie',
            radius : '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data:vue.data
            	/*[
                {value:5352, name: '史珍香'},
                {value:5352, name: '王大力'},
                {value:2000, name: '张大炮'},
                {value:6340, name: '离离原上草'},
                {value:7352	, name: '春风吹又生'}
            ]*/
        ,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
        },100);

        });
    </script>
        
        
</body>
</html>